<!DOCTYPE html>
<html>
	  
	<head>
	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		
		<link href="../lib/css/vparallax.css" rel="stylesheet" type="text/css"/>

		<title>
			Vertical Parallax (vparallax) Library Sample
		</title>
		
		<style>
			body{
				padding: 0;
				margin: 0;
			}
			.bg1{
				background: url('diamond_upholstery.png');
			}
			.bg2{
				background: url('gridme.png');
			}
			.bg3{
				background: url('triangular.png');
			}
			.bg4{
				background: url('bo_play_pattern.png');
				color: white;
			}
		</style>
		
	</head>
	
	<body>
	
		<div id="parallax_container">
		
			<div class="parallax_element">
				<div class="parallax_bg bg1"></div>
				<div class="parallax_content">this area has parallax in the background</div>
			</div>
			
			<div class="parallax_element">
				<div class="parallax_content bg2">this area has no parallax in the background</div>
			</div>
			
			<div class="parallax_element">
				<div class="parallax_bg bg3"></div>
				<div class="parallax_content">this area has parallax in the background</div>
			</div>
			
			<div class="parallax_element">
				<div class="parallax_content bg4">this area has no parallax in the background</div>
			</div>
			
		</div>
		
	</body>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="../lib/js/vparallax.min.js"></script>
	
	<script>
		vparallax(710, 0.3);
	</script>
	
</html>